<template>
  <view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
    <view class="top-top">

    </view>
    <live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0"
      :aspect="aspect" min-bitrate="1000" audio-quality="16KHz" device-position="back" :auto-focus="true" :muted="true"
      :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange"
      style="width: 100vw;height: 100vh;"></live-pusher>

    <view class="menu" style="display: flex;">
      <!--底部菜单区域背景-->
      <cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image>

      <!--返回键-->
      <cover-image class="menu-back" @tap="back" src="../../static/resort/close.png"></cover-image>

      <!--快门键-->
      <cover-image class="menu-snapshot" @tap="snapshot;show = true"
        src="../../static/resort/paizhao.png"></cover-image>

      <!--反转键-->
      <cover-image class="menu-flip" @tap="flip" src="../../static/resort/fanzhuan.png"></cover-image>
    </view>
    <u-popup :show="show" :round="20" mode="bottom" @close="close" @open="open" closeable>
      <view style="width: 100vw;height: 80vh;background-color: aqua;">
        123
      </view>
    </u-popup>
  </view>
</template>

<script>
  let _this = null;
  export default {
    data() {
      return {
        show: false,
        transShow: false,
        modeClass: ['fade'],
        maskClass: {
          position: 'fixed',
          bottom: 0,
          top: 0,
          left: 0,
          right: 0,
          'background-color': 'rgba(0, 0, 0, 0.4)'
        },
        transfromClass: {
          position: 'fixed',
          bottom: 0,
          top: 0,
          left: 0,
          right: 0,
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center'
        },
        poenCarmeInterval: null, //打开相机的轮询
        aspect: '2:3', //比例
        windowWidth: '', //屏幕可用宽度
        windowHeight: '', //屏幕可用高度
        camerastate: false, //相机准备好了
        livePusher: null, //流视频对象
        snapshotsrc: null //快照
      };
    },
    onLoad(e) {
      _this = this;
      this.initCamera();
    },
    onReady() {
      this.livePusher = uni.createLivePusherContext('livePusher', this);
      this.startPreview(); //开启预览并设置摄像头
      this.poenCarme();
    },
    methods: {
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
        // console.log('close');
      },
      onTap() {
        this.transShow = false;
      },
      //轮询打开
      poenCarme() {
        //#ifdef APP-PLUS
        if (plus.os.name == 'Android') {
          this.poenCarmeInterval = setInterval(function() {
            console.log(_this.camerastate);
            if (!_this.camerastate) _this.startPreview();
          }, 2500);
        }
        //#endif
      },
      //初始化相机
      initCamera() {
        uni.getSystemInfo({
          success: function(res) {
            _this.windowWidth = res.windowWidth;
            _this.windowHeight = res.windowHeight;
            let zcs = _this.aliquot(_this.windowWidth, _this.windowHeight);
            _this.aspect = (_this.windowWidth / zcs) + ':' + (_this.windowHeight / zcs);
            console.log('画面比例：' + _this.aspect);
          }
        });
      },

      //整除数计算
      aliquot(x, y) {
        if (x % y == 0) return y;
        return this.aliquot(y, x % y);
      },

      //开始预览
      startPreview() {
        this.livePusher.startPreview({
          success: a => {
            console.log(a)
          }
        });
      },

      //停止预览
      stopPreview() {
        this.livePusher.stopPreview({
          success: a => {
            _this.camerastate = false; //标记相机未启动
          }
        });
      },

      //状态
      statechange(e) {
        //状态改变
        console.log(e);
        if (e.detail.code == 1007) {
          _this.camerastate = true;
        } else if (e.detail.code == -1301) {
          _this.camerastate = false;
        }
      },


      //返回
      back() {
        uni.navigateBack();
      },

      //抓拍
      snapshot() {
        //震动
        uni.vibrateShort({
          success: function() {
            console.log('success');
          }
        });
        //拍照
        // this.livePusher.snapshot({
        //   success: e => {
        //     _this.snapshotsrc = e.message.tempImagePath;
        //     _this.stopPreview();
        //     _this.setImage();
        //     uni.navigateBack();
        //   }
        // });
      },

      //反转
      flip() {
        this.livePusher.switchCamera();
      },

      //设置
      setImage() {
        let pages = getCurrentPages();
        let prevPage = pages[pages.length - 2]; //上一个页面

        //直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
        prevPage.$vm.setImage({
          path: _this.snapshotsrc
        });
      }
    }
  };
</script>

<style lang="scss">
  .boxstyle {
    border-radius: 50rpx;
    box-sizing: border-box;
    padding: 20rpx;
    width: 100%;
    height: 85%;
    background-color: aqua;
    margin-top: 250rpx;
  }

  .top-top {
    width: 100%;
    height: var(--status-bar-height);
  }

  .live-camera {
    justify-content: center;
    align-items: center;
    position: relative;

    .menu {
      position: absolute;
      left: 0;
      bottom: 200rpx;
      width: 750rpx;
      height: 180rpx;
      z-index: 98;
      align-items: center;
      justify-content: center;

      .menu-mask {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 750rpx;
        height: 180rpx;
        z-index: 98;
      }

      .menu-back {
        position: absolute;
        left: 60rpx;
        top: -1100rpx;
        width: 80rpx;
        height: 80rpx;
        z-index: 99;
        align-items: center;
        justify-content: center;
      }

      .menu-snapshot {
        width: 130rpx;
        height: 130rpx;
        z-index: 99;
      }

      .menu-flip {
        position: absolute;
        right: 60rpx;
        top: -1100rpx;
        width: 80rpx;
        height: 80rpx;
        z-index: 99;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>